<template>
  <div class="mv">
    <div class="li" v-for="(item, index) in mvlist" :key="index" @click="toVideoPage(item.id)">
      <div class="img">
        <img :src="item.imgurl16v9" />
        <div class="playCount"><i class="iconfont icon-video"></i> {{ item.playCount > 10000 ? (item.playCount / 10000).toFixed(0) + '万' : item.playCount }} </div>
        <span class="time">{{ item.duration }}</span>
      </div>
      <div class="name">
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getSingerMv } from '../../../network/singer.js'
import { timeFormat } from '../../common/util.js'
export default {
  data () {
    return {
      id: 0,
      mvlist: []
    }
  },
  methods: {
    toVideoPage (id) {
      this.$router.push('/video_player/' + id)
    },
    getSingerMv (id) {
      getSingerMv(id).then(res => {
        // console.log(res.data)
        this.mvlist = res.data.mvs
        this.mvlist.forEach(item => {
          item.duration = timeFormat(item.duration)
        })
      })
    }
  },
  created () {
    this.id = parseInt(this.$route.params.id)
    this.getSingerMv(this.id)
  }
}
</script>

<style lang="less" scoped>
  .mv {
    width: 100%;
    margin: 10px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .li {
      width: 18%;
      margin-right: 2.5%;
      margin-bottom: 20px;
      .img {
        position: relative;
        width: 100%;
        img {
          width: 100%;
        }
        .playCount {
          position: absolute;
          top: 0;
          right: 0;
          width: 40%;
          height: 25px;
          color: #fff;
          text-align: right;
          padding-right: 5px;
          background-image: linear-gradient(to right, rgba(0,0,0,0.02), rgba(0,0,0,0.504));
          transform: translateY(0);
          transition: transform 0.5s;
        }
        .time {
          position: absolute;
          bottom: 5%;
          left: 3%;
          color: #fff;
        }
      }
      .name {
        width: 100%;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .li:nth-child(5n) {
      margin-right: 0;
    }
  }
</style>
